<template>
  <div>
    <van-nav-bar title="客户订单" left-arrow v-back left-text="返回" fixed class="order-detail__nav" />
    <div class="order-detail__container">
      <div class="order-detail">
        <div style="text-align: right;" v-if="detail.carrierId == 0 && (detail.paytype ? detail.payStatus : !detail.payStatus) && detail.state == 0 && stationInfo.cardNo != -1">
          <van-button type="primary"
            @click.native="chooseSender" size="small">分配配送员</van-button>
          &nbsp;&nbsp;
          <van-button type="primary"
            @click.native="confirmSend" size="small">确认配送</van-button>
          <div class="send-tips">
            若不确认配送，用户将无法确认收货
          </div>
        </div>
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">订单商品</div>
          <!-- <a class="edit-address__btn" @click="addReceiveInfo" v-show="detail.state == 1 || detail.state == 2" >
            添加收货信息
            <van-icon name="arrow"></van-icon>
          </a> -->
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item order-detail__item_product" v-for="item in detailList">
            <div class="order-detail__el order-detail__img" v-bind:style="{backgroundImage: 'url(' + item.icon + ')'}">
            </div>
            <div class="order-detail__el order-detail__right">
              <div class="order-detail__right__top">
                <div>{{item.waterName || item.productName}}</div>
                <div class="order-detail__right__top__sum">
                  <!-- <template v-if="item.deliver == 1">
                    ￥{{waterTotal * item.sum}}
                  </template>
                  <template v-else> -->
                    ￥{{item.sum}}
                  <!-- </template> -->
                </div>
              </div>
              <div>
                <!-- <template v-if="item.deliver == 1">
                  ￥{{item.sum.toFixed(1)}} x {{waterTotal}}
                </template>
                <template v-else> -->
                  ￥{{(item.sum / item.num).toFixed(1)}} x {{item.num}}
                <!-- </template> -->
              </div>
            </div>
            <!-- <div class="order-detail__el order-detail__name">{{item.waterName}}</div>
            <div class="order-detail__el order-detail__price">x{{item.num}}</div>
            <div class="order-detail__el order-detail__num">￥{{item.sum}}</div> -->
          </div>
          <div class="order-detail__count">
            <div class="order-detail__count__discount">
              已优惠<span class="price">￥0</span>
            </div>
            <div class="order-detail__count__total">
              合计<span class="price">￥{{detail.total}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="order-detail" v-if="detail.bucketDebtList && detail.bucketDebtList.length !== 0">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">欠桶信息</div>
        </div>
        <div class="order-detail__content">
          <div class="order-bucket__item" v-for="item in detail.bucketDebtList">
            <div class="order-bucket__item__tit">{{item.bucketName}}</div>
            <div class="order-bucket__item__content">x{{item.num}}</div>
            <div class="order-bucket__item__btn" @click="delBucket(item, 0)">
              <van-icon name="delete"></van-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="order-detail" v-if="detail.bucketRepayList && detail.bucketRepayList.length !== 0">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">还桶信息</div>
        </div>
        <div class="order-detail__content">
          <div class="order-bucket__item" v-for="item in detail.bucketRepayList">
            <div class="order-bucket__item__tit">{{item.bucketName}}</div>
            <div class="order-bucket__item__content">x{{item.num}}</div>
            <!-- <div class="order-bucket__item__btn" @click="delBucket(item, 1)">
              <van-icon name="delete"></van-icon>
            </div> -->
          </div>
        </div>
      </div>
      <div class="order-detail" v-if="detail.bucketBuyList && detail.bucketBuyList.length !== 0">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">买桶信息</div>
        </div>
        <div class="order-detail__content">
          <div class="order-bucket__item" v-for="item in detail.bucketBuyList">
            <div class="order-bucket__item__tit">{{item.bucketName}}</div>
            <div class="order-bucket__item__content">x{{item.num}}</div>
            <div class="order-bucket__item__btn" @click="delBucket(item, 2)">
              <van-icon name="delete"></van-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="order-detail">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">配送信息</div>
          <div class="order-detail__title__phone" @click="phone">
            <van-icon name="phone-o"></van-icon>
          </div>
          <!-- <a class="edit-address__btn" @click="editOrder" >
            修改配送信息
            <van-icon name="arrow"></van-icon>
          </a> -->
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item">
            <div class="order-detail__item__tit">收货人：</div>
            <div class="order-detail__item__content order-detail__item__address">
              {{detail.dName}}
            </div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">联系方式：</div>
            <div class="order-detail__item__content order-detail__item__address">
              {{detail.dPhone}}
            </div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">收货地址：</div>
            <div class="order-detail__item__content order-detail__item__address">
              {{detail.dRegion + detail.dAddress}}
            </div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">住房楼层：</div>
            <div class="order-detail__item__content order-detail__item__address">
              {{(detail.buildingFloor ? '&nbsp;&nbsp;&nbsp;' + detail.buildingFloor + '层' : '暂无' )}}
            </div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">住房类型：</div>
            <div class="order-detail__item__content order-detail__item__address">
              {{detail.buildingType == 1 ? '电梯房' : '爬楼房'}}
            </div>
          </div>
          <div class="order-detail__item" v-show="detail.carrierId !== 0">
            <div class="order-detail__item__tit" style="font-weight: bold;">配送员:</div>
            <div class="order-detail__el"><span class="order-detail__sendername">{{detail.carrierName}}&nbsp;&nbsp;{{detail.carrierPhone}}</span></div>
          </div>
        </div>
      </div>
      <div class="order-detail">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">订单信息</div>
          <div class="order-detail__title__status" v-bind:class="orderStatus(detail)">{{detail | orderStatusName}}</div>
        </div>
        <div class="order-detail__content">
          <div class="order-detail__item">
            <div class="order-detail__item__tit">订单号：</div>
            <div class="order-detail__item__content">{{detail.id}}</div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">下单时间：</div>
            <div class="order-detail__item__content">{{detail.time}}</div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">支付方式：</div>
            <div class="order-detail__item__content" style="color: #f00;font-size: 16px;">{{detail.state == 3 ? '取消付款' : ( detail.paytype == 0 ? '线上付款' : '线下支付')}}</div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">押桶方式：</div>
            <div class="order-detail__item__content">{{detail.exchange | getExchangeType}}</div>
          </div>
          <div class="order-detail__item">
            <div class="order-detail__item__tit">订单备注：</div>
            <div class="order-detail__item__content">{{detail.remark == '' ? '暂无备注' : detail.remark}}</div>
          </div>
        </div>
      </div>
      <div class="order-detail__btn">
        <van-button v-if="detail.carrierId == 0 && (detail.paytype ? detail.payStatus : !detail.payStatus) && detail.state == 0 && stationInfo.cardNo == -1" type="primary" @click.native="chooseStation">分配配送站</van-button>
        <van-button type="info" @click.native="showDialog" v-if="(detail.paytype && detail.state == 2) || (!detail.paytype && detail.state == 2)">水桶操作</van-button>
      </div>
    </div>
    <!-- 水桶操作开始 -->
    <van-dialog v-model="bucketShow" title="水桶操作" show-cancel-button :before-close="beforeClose">
      <div class="sender__edit">
        <van-field label="操作类型：" v-model="bucketTypeName" v-validate="'required'" data-vv-name="操作类型"
          label-align="right" :error-message="errors.first('操作类型')" placeholder="请选择操作类型" @click.native="showBucketType"
          readonly />
        <van-field label="水桶：" v-model="bucketName" v-validate="'required'" data-vv-name="水桶" label-align="right"
          :error-message="errors.first('水桶')" placeholder="请选择水桶" @click.native="showBucketList" />
        <van-field label="数量：" v-model="bucketCount" clearable v-validate="'required|isInteger'" data-vv-name="数量"
          label-align="right" :error-message="errors.first('数量')" placeholder="请输入数量" />
      </div>
    </van-dialog>
    <!-- 水桶操作结束 -->
    <!-- 收货信息开始 -->
    <van-dialog v-model="receiveInfoShow" title="收货信息" show-cancel-button :before-close="beforeCloseReceiveInfo">
      <div class="sender__edit">
        <div style="max-height: 70vh;overflow: auto;">
          <van-field v-for="item in waterList" :label="item.waterName + '：'" clearable v-validate="'isInteger'" :data-vv-name="item.waterName"
          label-align="right" :error-message="errors.first(item.waterName)" v-model="item.num" />
          
        </div>
        <van-field label="实收金额：" clearable v-validate="'required|isInteger'" data-vv-name="实收金额" v-model="receiveMoney"
          label-align="right" :error-message="errors.first('实收金额')" placeholder="请输入实收金额" />
        <van-field label="备注：" clearable 
          label-align="right" v-model="remark" placeholder="请输入备注" />
      </div>
    </van-dialog>
    <!-- 水桶操作结束 -->

    <!-- 水桶操作操作类型 -->
    
    <van-popup v-model="popupBucketTypeShow" position="bottom">
      <van-picker show-toolbar title="操作类型" :columns="bucketType" @cancel="onBucketCancel"
        @confirm="onBucketTypeConfirm" />
    </van-popup>
    <!-- 水桶操作水桶列表 -->
    <van-popup v-model="popupBucketChooseShow" position="bottom">
      <van-picker show-toolbar title="水桶列表" :columns="bucketColums" @cancel="onBucketCancel"
        @confirm="onBucketChooseConfirm" />
    </van-popup>
    <!-- 分配配送员 -->
    <van-popup v-model="popupShow" position="bottom">
      <van-picker show-toolbar title="配送员" :columns="columns" cancel-button-text="新增" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
    <!-- 分配配送站 -->
    <van-popup v-model="stationPopupShow" position="bottom">
      <!-- <van-cell-group>
        <van-field v-model="stationName" placeholder="请输入用户名" />
      </van-cell-group> -->
      <van-picker show-toolbar title="配送站" :columns="stationColumns" @cancel="onStationCancel" @confirm="onStationConfirm" />
    </van-popup>
  </div>
</template>
<script>
  import {
    CUSTOMER_ORDER_DETAIL,
    ADD_DEBT_BUCKET,
    ADD_REPAY_BUCKET,
    ADD_BUY_BUCKET,
    BUCKET_LIST,
    DEL_DEBT_BUCKET,
    DEL_REPAY_BUCKET,
    DEL_BUY_BUCKET,
    UPDATE_CUSTOMER_ORDER
  } from '@/api/user'
  import {
    GET_SENDER_LIST,
    SELECT_SENDER
  } from '@/api/sender'
  import {
    mapState
  } from 'vuex';
  export default {
    data() {
      return {
        detail: {},
        detailList: [], //商品
        popupShow: false,
        columns: [],
        bucketColums: [],
        stationColumns: [],
        senderList: [],
        bucketList: [],
        bucketType: ['欠桶', '还桶', '买桶'],
        bucketShow: false,
        popupBucketTypeShow: false, //操作类型popup
        popupBucketChooseShow: false, //水桶popup
        bucketTypeVal: '', //0：欠桶,1：买桶
        bucketTypeName: '',
        bucketVal: '',
        bucketName: '',
        bucketCount: 0,
        receiveInfoShow: false,
        receiveMoney: '',
        remark: '',
        stationName: '',
        stationPopupShow: false,
        stationName: '',
        stationList: []
      }
    },
    computed: {
      ...mapState(['stationInfo']),
      //订单信息修改所需水列表
      waterList(){
        let list = [];
        this.detailList.forEach(el => {
          list.push({
            waterName: el.waterName,
            waterId: el.waterId,
            num: el.num,
            price: el.sum / el.num
          })
        });
        return list;
      },
      waterTotal() {
        let total = 0
        this.detailList.forEach(el => {
          if (el.waterId) {
            total += el.num
          }
        })
        return total
      }
    },
    mounted() {
      this.getDetail();
      this.getSenderList();
      this.getBucketList();
    },
    methods: {
      chooseStation() {
        this.stationPopupShow = true
      },
      onStationCancel() {
        this.stationPopupShow = false
      },
      onStationConfirm(picker, value) {
        this.$dialog.confirm({
          title: '提示',
          message: '确定分配到' + this.stationList[value].name + '？'
        }).then(() => {
          this.$reqPost('/station/matchStation', new URLSearchParams({
            orderId: this.detail.id,
            giveId: this.stationInfo.id,
            putId: this.stationList[value].id
          })).then(res => {
            this.stationPopupShow = false
            this.$toast('分配到' + this.stationList[value].name + '操作成功')
            setTimeout(() => {
              this.$router.go(-1)
            }, 1200)
          });
        }).catch(() => {
          // on cancel
        });
        
      },
      //获取配送员列表
      getSenderList() {
        this.$reqPost(GET_SENDER_LIST, {
          stationId: this.stationInfo.id,
          page: 1,
          rows: 100 //获取50个暂定？
        }).then(res => {
          let list = [];
          res.rows.forEach(el => {
            list.push(el.name);
          });
          this.senderList = res.rows;
          this.columns = list;
        });
      },
      getDetail() {
        this.detailList = [];
        this.$reqGet(CUSTOMER_ORDER_DETAIL, {
          orderId: this.$route.query.id
        }).then(res => {
          this.detail = res.rows[0];
          this.detailList.push(...this.detail.orderWaterList, ...this.detail.orderProductList);

          this.$reqGet('/station/getStationListById', {
            orderId: this.detail.id,
          }).then(res => {
            this.stationColumns = res.rows.filter(el => {
              return el.id != this.detail.stationId
            }).map(el => {
              return el.name + '(' + (el.sort / 1000).toFixed(2) + 'km)'
            })
            this.stationList = res.rows.filter(el => {
              return el.id != this.detail.stationId
            })
          });
        })
      },
      onClickLeft() {
        // this.$router.push({
        //   path: '/order'
        // })
      },
      onCancel() {
        // this.popupShow = false;
        this.$router.push({
          path: '/senderSetting'
        })
      },
      onConfirm(picker, value) {
        let bucketNum = 0;
        this.detailList.forEach(el => {
          bucketNum += el.num;
        });
        this.$reqPost(SELECT_SENDER + '?orderId=' + this.detail.id + '&carrierId=' + this.senderList[value].id + '&bucketNum=' + bucketNum).then(
          res => {
            if (res.data == 1) {
              this.$toast('分配成功');
              this.getDetail();
              this.popupShow = false;
            } else {
              this.$toast('分配失败');
            }
          })
      },
      confirmSend() {
        this.$reqGet('/station/uppShopOver', {
          orderId: this.detail.id,
          state: 1
        }).then(res => {
          if (res.data == 1) {
            this.$toast('分配成功');
            this.getDetail();
          } else {
            this.$toast('分配失败');
          }
        })
      },
      //选择配送员
      chooseSender() {
        if (this.columns.length == 0) {
          this.$dialog.confirm({
            title: '提示',
            message: '还没有伙计可以配送哦，请前往设置'
          }).then(() => {
            this.$router.push('/senderSetting')
          }).catch(() => {
            // on cancel
          });
        } else {
          this.popupShow = true;
        }
      },
      //添加收货信息
      addReceiveInfo(){
        this.receiveInfoShow = true;
      },
      //工单状态
      orderStatus(item) {
        if (item.state == 3) {
          return 'order-status_cancel';
        }

        if (!item.paytype) {
          if (item.payStatus) {
            return 'order-status_cancel'
          }
        }

        if (item.state == 0) {
          return 'order-status_wait';
        } else if (item.state == 1) {
          return 'order-status_sending';
        } else if (item.state == 2) {
          return 'order-status_finsih';
        }

        return '';
      },
      phone() {
        window.location.href = 'tel:' + this.detail.dPhone;
      },
      //水桶操作取消
      onBucketCancel() {
        this.popupBucketTypeShow = false;
        this.popupBucketChooseShow = false;
      },
      //水桶操作类型确认
      onBucketTypeConfirm(val, i) {
        this.bucketTypeVal = i;
        this.bucketTypeName = val;
        this.popupBucketTypeShow = false;
      },
      //水桶确认
      onBucketChooseConfirm(val, i) {
        this.bucketName = this.bucketList[i].name;
        this.bucketVal = this.bucketList[i].id;
        this.popupBucketChooseShow = false;
      },
      //展示水桶操作类型
      showBucketType() {
        this.popupBucketTypeShow = true
      },
      //展示水桶
      showBucketList() {
        this.popupBucketChooseShow = true;
      },
      //水桶操作关闭
      beforeClose(action, done) {
        if (action == 'cancel') {
          done();
        } else {
          this.$validator.validateAll().then((result) => {
            if (result) {
              this.addBucketInfo(done);
            } else {
              done(false);
            }
          });
        }
      },
      //展示欠桶换桶弹窗
      showDialog() {
        this.bucketShow = true;
      },
      //新增欠桶换桶买桶
      addBucketInfo(done) {
        let params = {
          orderId: this.detail.id,
          stationId: this.stationInfo.id,
          bucketId: this.bucketVal,
          num: this.bucketCount
        }
        //欠桶
        if (this.bucketTypeVal == 0) {
          this.$reqPost(ADD_DEBT_BUCKET, params).then(res => {
            done();
            this.$toast('保存成功');
            this.getDetail();
          }).catch(res => {
            this.$toast('该订单已有欠桶信息');
            done();
          })
        } else if(this.bucketTypeVal == 1) {
          //还桶{
          this.$reqPost(ADD_REPAY_BUCKET, params).then(res => {
            done();
            this.$toast('保存成功');
            this.getDetail();
          }).catch(res => {
            this.$toast('该订单已有还桶信息');
            done();
          })
        } else if(this.bucketTypeVal == 2) {
          //买桶{
          this.$reqPost(ADD_BUY_BUCKET, params).then(res => {
            done();
            this.$toast('保存成功');
            this.getDetail();
          }).catch(res => {
            this.$toast('该订单已有买桶信息');
            done();
          })
        }
      },
      //获取水桶列表
      getBucketList() {
        this.$reqGet(BUCKET_LIST).then(res => {
          this.bucketList = res.rows;
          let colums = [];
          this.bucketList.forEach(el => {
            colums.push(el.name);
          });
          this.bucketColums = colums;
        });
      },
      //删除水桶
      delBucket(item, type){
        this.$dialog.confirm({
          title: '提示',
          message: '确认删除'
        }).then(() => {
          let url = ''
          if(type == 0){
            url = DEL_DEBT_BUCKET;
          }else if(type == 1){
            url = DEL_REPAY_BUCKET;
          }else if(type == 2){
            url = DEL_BUY_BUCKET;
          }
          this.$reqPost(url, {
            orderId: this.detail.id,
            stationId: this.stationInfo.id,
            bucketId: item.bucketId
          }).then(res => {
            this.$toast('删除成功');
            this.getDetail();
          }).catch(res => {
            this.$toast('请求失败');
          });
        }).catch(() => {
        });
      },
      //收货信息关闭前
      beforeCloseReceiveInfo(action, done){
        if (action == 'cancel') {
          done();
        } else {
          this.$validator.validateAll().then((result) => {
            if (result) {
              let params = {
                bucketList: [],
                total: this.receiveMoney,
                orderId: this.detail.id,
                remark: this.remark
              }
              this.waterList.forEach(el => {
                params.bucketList.push({
                  waterId: el.waterId,
                  num: el.num || 0,
                  sum: (el.price * el.num).toFixed(1)
                })
              });
              this.$reqPost(UPDATE_CUSTOMER_ORDER, params).then(res => {
                this.$toast('保存成功');
                done();
              }).catch(err => {
                this.$toast('保存失败')
                done(false);
              })
            } else {
              done(false);
            }
          });
        }
      }
    },
    filters: {
      orderStatusName(item) {
        if (item.state == 3) {
          return '已取消';
        }
        if (!item.paytype) {
          if (item.payStatus) {
            return '待支付'
          }
        }
        if (item.state == 0) {
          return '待配送';
        } else if (item.state == 1) {
          return '配送中';
        } else if (item.state == 2) {
          if (item.evaluation) {
            return '未评价'
          } else {
            return '已完成';
          }
        }
        return '';
      },
      //水桶押金方式名称
      getExchangeType(val) {
        let arr = ['欠桶', '还桶', '买桶', '杂桶兑换', '空桶兑换'];
        let res = [];
        if (val !== undefined) {
          val.split(',').forEach(el => {
            res.push(arr[el - 1] || '');
          });
          return res.toString();
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  @import '../../styles/variable.less';

  .order-detail__container {
    position: absolute;
    top: 46px;
    bottom: 10px;
    width: 100%;
    background-color: #f5f5f5;
    overflow: auto;
  }



  .order-detail {
    border-radius: 5px;
    margin: 8px;
    padding: 10px 10px 5px 10px;
    background-color: #ffffff;
    margin-bottom: 10px;
    color: #666666;
  }

  .order-detail__title {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px;
    margin-bottom: 8px;

    .order-detail__title__tag {
      flex: 0 0 4px;
      height: 17px;
      margin-top: 2px;
      margin-right: 6px;
      background-color: @col-the;
    }

    .order-detail__title__status {
      position: absolute;
      right: 5px;
      top: 0px;

      &.order-status_cancel {
        color: #999999;
      }

      &.order-status_unpay {
        color: @col-red;
      }

      &.order-status_wait {
        color: @col-yellow;
      }

      &.order-status_sending {
        color: @col-the;
      }
    }

    .order-detail__title__phone {
      position: absolute;
      right: 5px;
      top: 2px;
      display: flex;

      i {
        font-size: 18px;
      }
    }
  }

  .order-detail__btn {
    display: flex;

    button {
      flex: 1;
      margin: 0 10px;
    }
  }
  .order-detail__sendername{
    color: @col-the;
    font-weight: bold;
  }
  .order-bucket__item{
    display: flex;
    margin-bottom: 8px;
    font-size: 12px;
    .order-bucket__item__tit{
      flex: 0 0 60%;
    }
    .order-bucket__item__content{
      flex: 0 0 30%;
      text-align: right;
      margin-right: 10px;
      color: #999;

    }
    .order-bucket__item__btn{
      display: flex;
      align-items: center;
      flex: 1;
      font-size: 16px;
      color: #ff0000;
    }
  }

  .order-detail__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;

    .order-detail__item__tit {
      color: #999;
    }

    .order-detail__item__content {
      color: #343434;

      &.order-detail__total {
        color: @col-the;
      }

      &.order-detail__item__address {
        text-align: right;
      }
    }

    &.order-detail__item_product {
      color: #999999;
    }



    .order-detail__el {
      font-size: 12px;

      &.order-detail__img {
        flex: 0 0 60px;
        height: 60px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }

      &.order-detail__name {
        flex: 0 0 35%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      &.order-detail__num {
        width: 45px;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
      }

      &.order-detail__status_sending,
      &.order-detail__total {
        color: @col-the;
      }

      &.order-detail__receiver {
        color: #888;
      }


      &.order-detail__right{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3px 0 5px 0;
        .order-detail__right__top{
          display: flex;
          justify-content: space-between;
          color: #000;
        }
      }
    }
  }

  .order-detail__count{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border-top: 1px solid #f5f5f5;
    padding-top: 5px;
    font-size: 12px;
    .order-detail__count__discount{
      margin-right: 10px;
      margin-bottom: 2px;
      .price{
        color: @col-the;
      }
    }
    .order-detail__count__total{
      .price{
        font-size: 18px;
        color: @col-the;
      }
    }
  }
  .send-tips {
    font-size: 12px;
    text-align: right;
  }
  .edit-address__btn {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 12px;
    color: @col-the;

    i {
      position: relative;
      top: 2px;
    }
  }

  .operate-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 14px;
    letter-spacing: 10px;
  }

</style>
